<script setup lang="ts" name="NagalandLottery">
import API from '@/api';
import { userinfo } from '@/store';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
dayjs.extend(duration);

const { t } = useI18n();
const router = useRouter();
const route = useRoute();

const piniaUserinfo: any = userinfo();

const data: any = reactive({
  lotteryList: [],
});

const { lotteryList} = toRefs(data);

const initlotteryList = async () => {
  try {
    let res = await API.getlotteryList({lotteryTypeCode:route?.query?.lotteryTypeCode});
    console.log('initlotteryList', res);
    if(res?.code === 200) {
      lotteryList.value = res.data || [];
    }
  } catch (error) {
  }
};
initlotteryList();

const handleGoBet = (item: any) => {
  console.log('handleGoBet', item);
  router.push(`/bet/${item?.lotteryPlanId}?title=${decodeURIComponent(item?.lotteryPlanName)}&period=${decodeURIComponent(item?.period)}&lotteryEndTime=${decodeURIComponent(item?.lotteryEndTime)}`);
}
</script>

<template>
  <div class="nagalandLotteryPage">
    <DetailHeader :title="(route?.query?.title as any)" :isNeedBackIcon="true"/>
    <div class="lotteryList">
    <div
      class="lotteryItem"
      v-for="(item, index) in lotteryList"
      :key="item.id"
      @click="handleGoBet(item)"
    >
      <!-- <div class="top">
        <div class="left">{{ item?.lotteryClassName  }}</div>
        <div class="right">₹ {{ item?.money }}</div>
      </div>
      <div class="bottom">
        <div class="timeData">
          <div class="ticketNumber">
            <div class="text1">{{ item?.period }}</div>
            <div class="text2">{{ dayjs(+item?.lotteryEndTime).format('A hh:mm') }}</div>
          </div>
          <div class="money margin1">{{ t('nagaland.test1').replace('*', item?.ruleList[0]?.ruleBonus) }}</div>
        </div>
        <div class="middle">
        </div>
        <div class="right">
          <div class="rightTime">
            <div class="text1">{{ t('nagaland.test2') }}</div>
            <div class="text2 margin2">{{ dayjs(+item?.lotteryEndTime).format('DD-MM-YYYY') }}</div> 
          </div>
          <div class="deadLine margin1">
            <Iconfont name="icon-icon_shijian" color="#1E93FF" size="16" />
            {{  dayjs.duration(item?.lotteryEndTime - item?.nowTime).hours() }} {{ t('nagaland.test3') }} {{ dayjs.duration(item?.lotteryEndTime - item?.nowTime).minutes() }} {{ t('nagaland.test4') }}</div>
        </div>
      </div> -->
      <div class="lotteryUrl"><img :src="item.lotteryUrl" alt=""></div>
    </div>

    
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
